<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-08-05 16:17:18
 * @LastEditors: charles
 * @LastEditTime: 2021-08-06 17:17:00
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
	<title>二级菜单</title>
	<style>
		html {
			font: normal normal 14px '微软雅黑';
			color: #666;
		}
		body ,p{
			margin: 0;
			padding: 0;
		}
		ul,ol {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		a {
			text-decoration: none;
			color: #666;
		}
		.header {
			background-color: #003262;
		}
		.header a{
			color: #fff;
		}
		.header ul.menu {

		}
		.header ul.menu::after {
			display: block;
			content: "";
			clear: both;
		}
		.header ul.menu > li.menu_item	{
			float: left;
			position: relative;
			width: 100px;
			text-align: center;
		}
		.header ul.menu > li.menu_item:hover ul.sub_menu	{
			display: block;
		}
		.header ul.menu ul.sub_menu {
			display: none;
			position: absolute;
			background-color: #fff;
			width: 120px;
		}
		.header ul.menu ul.sub_menu a {
			color: #003262;
		}
		.header ul.menu ul.sub_menu > li:hover{
			background-color: #003262;
		}
		.header ul.menu ul.sub_menu > li:hover a{
			color: #fff;
		}

		.carousel {
			background-color: lightcoral;
			min-height: 300px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="header">
			<ul class="menu">
				<li class="menu_item" v-for="c in categories" :key="c.id">
					<a href="">{{c.name}}</a>
					<ul class="sub_menu">
						<li v-for="sc in c.children" :key="sc.id"><a href="">{{sc.name}}</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="carousel">

		</div>
	</div>

	<script>
		new Vue({
			el:'#app',
			data:{
				name:"hello world",
				categories:[]
			},
			created(){
				this.loadCategoryTree();
			},
			methods:{
				loadCategoryTree(){
					let url = "http://localhost:8888/index/category/findCategoryTree"
					axios.get(url).then(resp => {
						this.categories = resp.data.data;
					})
				}
			}
		})
	</script>
</body>
</html>